import { Modal, Space, Typography } from "antd";
import "./index.less";
import { StyledAgree, StyledCancel, StyledDel } from "../button";
import { ModalProps } from "antd/lib/modal";
const { Title } = Typography;
interface CustomModalProps extends ModalProps {
  icon?: string;
  title: string;
  content?: React.ReactNode;
  onOk: () => void;
  onCancel?: () => void;
  changeShowModal?: () => void;
  isModalOpen?: boolean;
  btnLeftText?: string;
  btnRightText?: string;
  width?: string;
  // 新增按钮颜色相关配置
  btnLeftBgColor?: string;
  btnLeftTextColor?: string;
  btnRightBgColor?: string;
  btnRightTextColor?: string;
  btnRightHoverBgColor?: string;
  displayCancelBtnFooter?: string;
  isDelBtnRight?: boolean;
}

const CustomModal: React.FC<CustomModalProps> = (props) => {
  const btnLeftStyles = {
    backgroundColor: props.btnLeftBgColor,
    color: props.btnLeftTextColor,
    display: props.displayCancelBtnFooter,
    ...({} as { [key: string]: string | number | undefined }),
    ":hover": {
      backgroundColor: props.btnRightHoverBgColor,
    },
  };

  const btnRightStyles = {
    backgroundColor: props.btnRightBgColor,
    color: props.btnRightTextColor,
  };
  // console.log(props.footer, "222");
  // footer 并设置默认值 为true
  const { footer = true } = props;
  return (
    <>
      <Modal
        width={props?.width}
        className="custom-Modal"
        open={props.isModalOpen}
        footer={true}
        {...props}
        title=""
      >
        <div className="modal-icon">
          <img className="icon-img" src={props.icon} alt="Icon" />
        </div>
        <Title level={5}>{props.title}</Title>
        <div className="modal-content">{props.content}</div>
        {footer && (
          <Space size={"middle"}>
            <StyledCancel
              type="default"
              onClick={props.onCancel}
              size={"middle"}
              // 应用配置的颜色
              style={btnLeftStyles}
            >
              {props.btnLeftText}
            </StyledCancel>
            {props.isDelBtnRight !== true && (
              <StyledAgree
                type="default"
                onClick={props.onOk}
                size={"middle"}
                // 应用配置的颜色
                style={btnRightStyles}
              >
                {props.btnRightText}
              </StyledAgree>
            )}
            {props.isDelBtnRight === true && (
              <StyledDel
                type="default"
                onClick={props.onOk}
                size={"middle"}
                // 应用配置的颜色
                style={btnRightStyles}
              >
                {props.btnRightText}
              </StyledDel>
            )}
          </Space>
        )}
      </Modal>
    </>
  );
};

export default CustomModal;
